<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--需求数据-->
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="68px"
        >
          <el-form-item label="需求名称" prop="userName">
            <el-input
              v-model="queryParams.needName"
              placeholder="请输入需求名称"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="创建时间">
            <el-date-picker
              v-model="dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['system:user:add']"
            >新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['system:user:edit']"
            >修改
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['system:user:remove']"
            >删除
            </el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
        </el-row>
        <!-- 数据表格 -->
        <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" sortable/>
          <el-table-column label="需求编号" align="center" key="id" prop="id" v-if="columns[0].visible"/>
          <el-table-column label="需求名称" align="center" key="name" prop="name" v-if="columns[1].visible"
                           :show-overflow-tooltip="true"
          />
          <el-table-column label="需求描述" align="center" key="needDep" prop="needDep" v-if="columns[2].visible"
                           :show-overflow-tooltip="true"
          />
          <el-table-column label="状态" align="center" prop="needState"  key="needState" v-if="columns[5].visible">
            <template slot-scope="scope">
              <el-tag :title="scope.row.needState">{{ needState[scope.row.needState].label}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="归属项目" align="center" key="needProject" prop="needProject" v-if="columns[3].visible"
                           :show-overflow-tooltip="true"
          />
          <el-table-column label="需求来源" align="center" key="needSource" prop="needSource" v-if="columns[4].visible"
                           width="120"
          />
          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160"/>
          <!-- <el-table-column label="文件路径" align="center" prop="needFilepath" v-if="columns[7].visible" width="160"/> -->
          <el-table-column label="文件名称" align="center" prop="needFilename" v-if="columns[8].visible" width="160">
            <template slot-scope="download">
               <el-link :href="download.row.needFilepath" :underline="true" target="_blank">
                <span class="el-icon-document"> {{ download.row.needFilename}}</span>
                
              </el-link>
            </template>           
          </el-table-column>
          <!-- <el-table-column label="图片路径" align="center" prop="needImagepath" v-if="columns[9].visible" width="160"/> -->
          <el-table-column label="图片名称" align="center" prop="needImagename" v-if="columns[10].visible" width="160">
            <template slot-scope="imgPreView">
              <span>{{imgPreView.row.needImagename}}</span>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="imgPV(imgPreView.row)"
              >预览
              </el-button>
            </template>
          </el-table-column>
          <!-- <el-table-column label="图片名称" align="center" prop="needImagename" v-if="columns[10].visible" width="160"/> -->
          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:user:edit']"
              >修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:user:remove']"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <el-dialog
      :visible.sync="ImageDialog"
      title="预览"
      width="800"
      append-to-body
      @close="dialogImageUrl = ''"
    >
      <img
        :src="dialogImageUrl"
        style="display: block; max-width: 100%; margin: 0 auto"
      />
    </el-dialog>
    <!-- 新增/修改需求对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form :model="form" label-width="80px">
          <el-form-item label="需求名称">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="需求描述">
            <el-input v-model="form.needDep" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="needState[form.needState].label">
              <el-option
                v-for="item in needState"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>          
          </el-form-item>
          <el-form-item label="归属项目">
            <el-input v-model="form.needProject" />
          </el-form-item>
          <el-form-item label="需求来源">
            <el-input v-model="form.needSource" />
          </el-form-item>
          <!-- 文件上传 -->
          <el-form-item label="文件附件">
            <File-upload 
              :value="fileUploadParams.value"
              :fileSize="fileUploadParams.fileSize"
              :fileType="fileUploadParams.fileType"
              :isShowTip="fileUploadParams.isShowTip"
              :limit="fileUploadParams.limit"
              :uploadFileUrl="fileUploadParams.uploadFileUrl"
              @input="getFileList"
              ></File-upload>
          </el-form-item>
          <el-form-item label="图片">
            <img-upload 
              :value="imgUploadParams.value"
              :fileSize="imgUploadParams.fileSize"
              :fileType="imgUploadParams.fileType"
              :isShowTip="imgUploadParams.isShowTip"
              :limit="imgUploadParams.limit"
              :uploadFileUrl="imgUploadParams.uploadFileUrl"
              @input="getImageList"
              ></img-upload>
          </el-form-item>
        </el-form>
        
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitAddForm">确 定</el-button>
          <el-button @click="open = false">取 消</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import { getNeedsByid, listNeeds, addNeeds, delNeeds, updateNeeds } from '@/api/system/needs'
import { getToken } from "@/utils/auth";
import FileUpload from './fileUpload.vue'
import imgUpload from './imgUpload.vue'
export default {
  dicts: ['sys_normal_disable', 'sys_user_sex'],
  components:{FileUpload,imgUpload},
  data() {
    return {
      showSearch: true,
      multiple: true,
      single: true,
      // 对话框状态
      open:false,
      ImageDialog:false,
      // 文件上传参数
      fileUploadParams:{
        value:'',
        limit:1,
        fileSize:10,
        fileType:["doc", "xls", "ppt", "txt", "pdf","zip","rar"],
        isShowTip:true,
        uploadFileUrl:process.env.VUE_APP_BASE_API + "/file/three/upload"
      },
      //图片上传参数
      imgUploadParams:{
        value:'',
        limit:1,
        fileSize:10,
        fileType:["jpeg","jpg","png","bmp"],
        isShowTip:true,
        uploadFileUrl:process.env.VUE_APP_BASE_API + "/file/three/upload"
      },
      // 图片预览对话框图片路径
      dialogImageUrl:'',
      // 表格数据查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        needName: undefined,
        status: undefined
      },
      total: 0,
      dataList: [],
      //新增/修改需求的form
      title:'',
      needState:[
          {value:0,label:'提交'},
          {value:1,label:'开发'},
          {value:2,label:'测试'},
          {value:3,label:'上线'},
          {value:4,label:'关闭'},
        ],
      form:{
        rowid:'',
        name:'',
        needDep:'',
        needState:0,
        needProject:'',
        needSource:'',
        needFilename:'',
        needFilepath:'',
        needImagename:'',
        needImagepath:'',
      },
      // 日期范围
      dateRange: [],
      columns: [
        { key: 0, label: `需求编号`, visible: true },
        { key: 1, label: `需求名称`, visible: true },
        { key: 2, label: `需求描述`, visible: true },
        { key: 3, label: `状态`, visible: true },
        { key: 4, label: `归属项目`, visible: true },
        { key: 5, label: `需求来源`, visible: true },
        { key: 6, label: `创建时间`, visible: true },
        { key: 7, label: `文件路径`, visible: true },
        { key: 8, label: `文件名称`, visible: true },
        { key: 9, label: `图片路径`, visible: true },
        { key: 10, label: `图片名称`, visible: true },
      ],

    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    getList() {
      this.loading = true
      const search = {
        params: { ...this.queryParams, createTimeList: this.dateRange },
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize
      }
      listNeeds(search).then(response => {
          if(response.code == 500){
            console.log('需求列表请求500',response.code)
            return;
          }
          var token = getToken()
          response.rows.forEach(element => {
            element.needFilepath = `${process.env.VUE_APP_BASE_API}/file/three/download?filePath=${element.needFilepath}&filename=${element.needFilename}&access_token=${token}`
          });
          this.dataList = response.rows
          this.total = response.total
          this.loading = false
        }
      ).catch(e => {
        console.log('需求列表请求500'+e)
        this.dataList = []
        this.loading = false
      })
      
    },
    // 添加需求按钮操作
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '增加需求'
      
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      const needid = row.id || this.ids
      getNeedsByid(needid).then(response => {
        this.form = response.data
        this.fileUploadParams.value = response.data.needFilename
        this.imgUploadParams.value = process.env.VUE_APP_BASE_API + "/file/three/download?filePath="+response.data.needImagepath+"&filename="+response.data.needImagename+"&access_token="+getToken()
        this.open = true
        this.title = '修改需求'
      }).catch((e) => {
        console.log('修改功能报错',e)
      })
    },
    // 查询条件重置
    resetQuery() {
      this.dateRange = []
      this.queryParams.needName = ''
      this.handleQuery()
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const userIds = row.id || this.ids
      this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function() {
        return delNeeds(userIds)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch((e) => {
        console.log('删除功能报错',e)
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      // 选中的是一个还是多个
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    // 获取文件名称和路径
    getFileList(v) {
      this.form.needFilename = v.needFilename;
      this.form.needFilepath = v.needFilepath;
    },
    // 获取图片名称和路径
    getImageList(v) {
      this.form.needImagename = v.needImagename;
      this.form.needImagepath = v.needImagepath;
    },
      // 图片预览
    imgPV(row){
      this.ImageDialog = true;
      this.dialogImageUrl =  process.env.VUE_APP_BASE_API + "/file/three/download?filePath="+row.needImagepath+"&filename="+row.needImagename+"&access_token="+getToken()
    },
    // 提交新增/修改表单
    submitAddForm(e) {
      if(this.title == '修改需求'){
        updateNeeds(this.form).then(response =>{
          this.$modal.msgSuccess('更新成功')
          this.open = false;
          this.getList()
        })
      }else if(this.title == '增加需求'){
        addNeeds(this.form).then(response =>{
          this.$modal.msgSuccess('上传成功')
          this.open = false;
          // 更新表格
          this.getList()
        })
      }
     
    },
    // 指控form表单对象和文件value对象
    reset(){
      if (Object.keys(this.form).length != 0) {
        Object.keys(this.form).forEach((key)=>{
          this.form[key] = '';
        })
      }
      this.title = '';
      this.fileUploadParams.value = '',
      this.imgUploadParams.value = ''      
    },
  },
  watch: {},
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
</style>
